// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
// var Foo = { template: '<div>foo</div>' }
// var Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
var routes = [
    { path: '/foo', component: homeOBJ },
    { path: '/bar', component: fooOBJ }
  ]

// var Home = Vue.extend({
//     template: homeOBJ,
//     data: function() {
//         return {
//             msg: 'Hello, vue router!'
//         }
//     }
// })
 
var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

})

// 2.创建Router
var router = new VueRouter({
    routes
})  

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
    router
  }).$mount('#app')